import { memo } from "react"
import { Link } from 'react-router-dom'

const CommentItem = (props) => {
    const { comment, currentUser, slug } = props
    console.log(comment,'111');
    //是否显示删除按钮判断
    const showDelete = currentUser && currentUser.username === comment.user.username
    // console.log(currentUser);
    // console.log(currentUser.username);
    // console.log(comment.user.username);
    return (
        <div className="card-block">
            <div className="card-block">
                <p className="card-text">{comment.body}</p>
            </div>
            <div className="card-footer">
                <Link to={`/${comment.user.username}/profile`} className='comment-author'>
                    <img style={{width:30,height:30}}  className="comment-author-img" src={comment.user.avatar || 'https://gu0nuli.github.io/reactStatic/react_static/v1_111.jpg'} alt='username' />
                </Link>
                <Link to={`/${comment.user.username}/profile`} className='comment-author'>
                    {comment.user.username}
                </Link>
                <span className="date-posted">{new Date(comment.createdAt).toDateString()}</span>
                {
                    showDelete ? (<button style={{float:"right"}} className="mod-options btn-primary"><i class="fa fa-trash-o fa-lg"></i> 删除</button>) : null
                }
            </div>
        </div>
    )
}

export default memo(CommentItem)